<template>
  <view class="Global">


    <!-- <image class="imagepage" src="/static/background.png" mode=""></image> -->
    <bgImage></bgImage>
    <MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>




    <scroll-view scroll-y="true" class="ContentScroll" :style="'height:'+scrollViewHeight+'px'">
      <view class="ContentScrollInner">

        <view class="listContent" v-for="(item,index) in listData">




          <view class="contentItem" v-if="item.type==0">

            <view class="contentItemTextLeftContent">
              <text class="contentItemTextLeft">{{item.title}}</text>
              <text class="contentItemTextLeftStart">*</text>
            </view>

<input @input="onInputAccount(index,$event)" class="contentItemTextRight" type="text" :value="item.Value"
							placeholder-class="title3" placeholder="请输入" />

          </view>


          <view class="contentItem2" v-if="item.type==1">

            <view class="contentItemTextLeftContent">
              <text class="contentItemTextLeft">{{item.title}}</text>
              <text class="contentItemTextLeftStart">*</text>
            </view>
           <input @input="onInputAccount(index,$event)" class="contentItemTextRight" type="text" :value="item.Value"
           							placeholder-class="title3" placeholder="请输入" />
          </view>



          <view class="contentItem2" v-if="item.type==2" @click="goUrl(item)">

            <view class="contentItemTextLeftContent">
              <text class="contentItemTextLeft">{{item.title}}</text>
              <text class="contentItemTextLeftStart">*</text>
            </view>

            <view class="contentItemRightContent">
              <text class="contentItemTextLeft">{{item.Value}}</text>
              <image class="contentItemRightContentImg" src="/static/gongzuotai/xia_jiantou.png" mode="">
              </image>
            </view>

          </view>

          <view class="lineBg"></view>
        </view>



        <!-- 选项卡 切换 -->
        <view class="SwitchTabOut">


          <view class="SwitchTabOutInner">

            <view class="head-nav">
              <view :class="navIndex==0?'activite':''" @click="checkIndex(0)">
                <text>工业指导书</text>

              </view>
              <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">
                <text>图片列表</text>

              </view>


            </view>

            <view class="head-nav-line">
              <view class="head-nav-line1" @click="checkIndex(0)">
                <text :class="navIndex==0?'line':''"></text>

              </view>
              <view class="head-nav-line1" @click="checkIndex(1)">
                <text :class="navIndex==1?'line':''"></text>

              </view>


            </view>



            <!-- 内容切换 -->
            <!-- 工业指导书 -->
            <view class="content" v-if="navIndex==0">

              <view class="listDataInnerBottom">
                <text @click="updateData(item)" class="listDataInnerBottomTextBlack">选择工序</text>
                <text class="listDataInnerBottomTextBlack">复制其他款</text>
                <text class="listDataInnerBottomTextRed" @click="removeProcess()">删除</text>
                <text class="listDataInnerBottomTextRed" @click="removeProcessAll()">删除所有</text>
              </view>



              <!-- 按钮操作 -->

              <view class="workList-buttons">


                <view class="workList-buttons_text" @click="selectAllClick()">
                  <text class="contentListItemLeftImgText" v-if="selectAll==false"></text>
                  <image class="contentListItemLeftImg" v-if="selectAll==true"
                         src="../../../static/xuanzhong.png" mode="scaleToFill"></image>
                </view>
                <!--								<text class="workList-buttons_text">工序分类</text>-->
                <!--								<text class="workList-buttons_text">工序号</text>-->
                <text class="workList-buttons_text">工序名</text>
                <text class="workList-buttons_text">工序工价</text>

              </view>


              <scroll-view class="uni-scoller-box" enableBackToTop="true" scroll-y>


                <view class="list_box_out">
                  <view class="list-box" v-for="(item,index) in workList" :key="index"
                        @click="clickItem(item,index)">
                    <!-- 标题 -->
                    <view class="list-box" v-if="index%2==0">


                      <text class="contentListItemLeftImgText" v-if="item.checked==false"></text>
                      <image class="contentListItemLeftImg" v-if="item.checked==true"
                             src="../../../static/xuanzhong.png" mode="scaleToFill"></image>

                      <text class="workList-buttons_text_1">{{ item.processName }}</text>
                      <text class="workList-buttons_text_1">{{ item.wages }}</text>

                    </view>


                    <view class="list-box1" v-if="index%2!=0">
                      <text class="contentListItemLeftImgText" v-if="item.checked==false"></text>
                      <image class="contentListItemLeftImg" v-if="item.checked==true"
                             src="../../../static/xuanzhong.png" mode="scaleToFill"></image>
                      <text class="workList-buttons_text_1">{{ item.processName }}</text>
                      <text class="workList-buttons_text_1">{{ item.wages }}</text>

                    </view>
                    <!-- 内容 -->
                  </view>
                </view>


              </scroll-view>
              <!-- 列表部分 -->
              <!-- 点击保存 -->
              <view class="content">

                <button @click="updateClick()" style="color:#ffffff" class="login"
                        type="default">{{login}}</button>
              </view>



            </view>



            <!-- 图片列表 -->
            <view class="contentImgOut" v-if="navIndex==1">

              <view class="contentImgOutInner">

                <scroll-view scroll-x="true" class="ContentScrollX">
                  <view class="contentImg" v-for="(item,index) in imgArr">


                    <image class="contentImg2" :src="apiUrl+item" mode=""></image>
                    <view class="contentImgDeleteBg" @click="deleteImg(index)">
                      <image class="contentImgDelete" src="../../../static/gongzuotai/delete.png"
                             mode="">
                      </image>
                    </view>
                  </view>

                  <view class="contentImg" @click="chooseImage()" v-if="imgArr.length<1">

                    <view class="contentImgAddBg">
                      <image class="contentImgAdd" src="../../../static/gongzuotai/shangchuan.png"
                             mode="">
                      </image>
                    </view>
                  </view>

                </scroll-view>

              </view>
              <!-- 点击保存 -->
              <view class="content">

                <button @click="updateClick()" style="color:#ffffff" class="login"
                        type="default">{{login}}</button>
              </view>

            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import MyNav from '@/components/customnavbar.vue'
import bgImage from '@/components/backgroundImage.vue'
import { getNumberOneManager,updateNumberManager} from "@/pages/api/api.js";
import config from "@/pages/api/config";

export default {
  components: {
    MyNav,
    bgImage,
  },
  computed: {
    computedStyle() {
      return {
        color: this.isActive ? this.textColor : 'black',

      }
    }
  },
  data() {
    return {
      id: '',
      isAllSelected: true, // 是否全部被选中
      checkedList: [], // 默认选中的值
      // 有复选框的列表数据
      workList: [],
      // 切换选项卡
      isActive: true,
      textColor: '#0081FF',
      navIndex: 0,
      login: '保存',
      title: '编辑款式',
      isback: true,

      scrollViewHeight: 0,
      listData: [{
        title: '款号',
        Value: '',
        tableFie: 'itemCode',
        type: 0
      },
        {
          title: '款名',
          Value: '',
          tableFie: 'itemName',
          type: 1
        },
        // {
        // 	title: '服装类型',
        // 	Value: '单杉',
        // 	type: 2
        // },
        {
          title: '单位',
          Value: '件',
          tableFie: 'unit',
          type: 1
        },
        {
          title: '颜色',
          Value: '',
          tableFie: 'colorstr',
          type: 2
        },
        {
          title: '尺码',
          Value: '',
          tableFie: 'sizestr',
          type: 2
        },
        // {
        // 	title: '裁床单价(元)',
        // 	Value: '100',
        // 	type: 1
        // },
        // {
        // 	title: '工序分类',
        // 	Value: '常用',
        // 	type: 2
        // },
        // {
        // 	title: '仓库',
        // 	Value: '成品仓库',
        // 	type: 2
        // },
        // {
        // 	title: '日期',
        // 	Value: '2030-01-01',
        // 	type: 2
        // },
      ],

      // 图片列表
      imgArr: [],
      storeId: '',
      tenantId: '',
      selectList: [],
      // 颜色选择回传数据
      listSizeData: [],
      //颜色 多个逗号隔开
      colorstr: '',
      colorIds: '',
      sizestr: '',
      sizeIds: '',
      sizeData: [],
      processData: [],
      selectAll: false,
      apiUrl: config.apiUrl
    }
  },

  onLoad: function (option) {
    this.id = JSON.parse(decodeURIComponent(option.id));
    // 在其他页面或组件中访问
    const app = getApp();
    this.storeId = app.globalData.storeId
    this.tenantId = app.globalData.tenantId
    this.scrollViewHeight = app.globalData.scrollViewHeight2
    this.getData()
  },
  onShow() {
    var that = this
    uni.$on('globleEvent', function(res) {
      // console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
      that.listSizeData = res.listSizeData
      console.log('选择颜色返回数据', that.listSizeData) //  为 B 页面传过来的值
      // 移除监听事件
      uni.$off('globleEvent');
    })
    uni.$on('globleSizeEvent', function(res) {
      // console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
      that.sizeData = res.listSizeData
      console.log('选择尺码返回数据', that.sizeData) //  为 B 页面传过来的值
      // 移除监听事件
      uni.$off('globleSizeEvent');
    })
    uni.$on('globleProcessEvent', function(res) {
      // console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
      that.processData = res.listData
      console.log('选择返回数据', that.processData) //  为 B 页面传过来的值
      // 移除监听事件
      uni.$off('globleProcessEvent');
    })
    this.processData.forEach(item=>{
      item.processPrice = item.wages
    })
    this.workList = [...this.workList, ...this.processData]

    let cost = 0;
    this.workList.forEach(item=>{
      cost = cost + item.processPrice;
    })

    let colors = []
    let cIds = []
    this.listSizeData.forEach((item, index) => {
      if (item.checked) {
        colors.push(item.colorName)
        cIds.push(item.id)
      }
    })
    this.colorstr = colors.join(',');
    this.colorIds = cIds.join(',');

    let sizes = []
    let sIds = []
    this.sizeData.forEach((item, index) => {
      if (item.checked) {
        sizes.push(item.sizeName)
        sIds.push(item.id)
      }
    })
    this.sizestr = sizes.join(',')
    this.sizeIds = sIds.join(',')

    // 重置颜色值
    this.listData.forEach(item => {
      if ('颜色' == item.title) {
        item.Value = this.colorstr
      }
      if ('尺码' == item.title) {
        item.Value = this.sizestr
      }
      if ('cost' == item.tableFie) {
        item.Value = cost
      }
    })


  },
  methods: {
    getData(){
      getNumberOneManager(this.id).then(res=>{
        if(res.code == 200){
          let data = res.data;
          this.colorIds = data.colorids
          this.colorstr = data.colorstr
          this.sizeIds = data.sizeids
          this.sizestr = data.sizestr
          if(data.imgs){
            this.imgArr.push(data.imgs)
          }
          this.listData.forEach(item=>{
            if(item.tableFie==='itemCode'){
              item.Value = data.itemCode
            }
            if(item.tableFie==='itemName'){
              item.Value = data.itemName
            }
            if(item.tableFie==='unit'){
              item.Value = data.unit
            }
            if ('颜色' == item.title) {
              item.Value = this.colorstr
            }
            if ('尺码' == item.title) {
              item.Value = this.sizestr
            }
          })
          this.workList = res.data.processList
          this.workList.filter(item=>{
            item.wages = item.processPrice
            item.checked = false
          })
        }
      })
    },
    // 点击全选按键
    selectAllClick() {
      this.selectAll = !this.selectAll

      this.workList.forEach((item, index) => {


        if (this.selectAll) {
          item.checked = true
        } else {
          item.checked = false
        }

      })

    },

    // 点击子项事件
    clickItem(item, index) {

      this.deviceSelectNum = 0
      this.workList.forEach((item, itemIndex) => {

        if (index == itemIndex) {
          item.checked = !item.checked
        }

        if (item.checked == true) {
          this.deviceSelectNum = this.deviceSelectNum + 1
        }

      })

      if (this.workList.length == this.deviceSelectNum) {
        this.selectAll = true;
      } else {
        this.selectAll = false;
      }
    },

    parentMethod(data) {
      console.info('子传父值', data)
    },
    goUrl(data) {
      console.info('goUrl', data)
      if (data.title == '颜色') {
        let list = []
        if(this.colorIds && this.colorIds.length>0){
          list = this.colorIds.split(",")
        }

        let parmas = {
          storeId: this.storeId,
          tenantId: this.tenantId,
          selectList: list
        }
        uni.navigateTo({
          url: '/subPackA/colorManagement/colorSelect/colorListSelect?data=' + encodeURIComponent(JSON
              .stringify(parmas)),
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      }
      if (data.title == '尺码') {
        let list = []
        if(this.colorIds && this.colorIds.length>0){
          list = this.sizeIds.split(",")
        }
        let parmas = {
          storeId: this.storeId,
          tenantId: this.tenantId,
          selectList: list
        }
        uni.navigateTo({
          url: '/subPack/sizeManagement/sizeSelect/sizeListSelect?data=' + encodeURIComponent(JSON
              .stringify(parmas)),
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      }
    },
    // 删除图片
    deleteImg(index) {
      // //删除操作 index数组中的下标，删除一个
      this.imgArr.splice(index, 1)

    },

    // 选择图片
    chooseImage() {
      let url = config.apiUrl
      console.log('url',url)
      let that = this
      uni.chooseImage({
        count: 1,
        // sizeType压缩图片
        sizeType: "compressed",
        success: (res) => {
          // this.imgArr =[...this.imgArr, res.tempFilePaths]
          // this.imgArr = this.imgArr.concat(res.tempFilePaths);
          console.log('xxxxxxxxx',res)
          uni.uploadFile({
            url: url+'/common/upload',
            filePath: res.tempFilePaths[0],
            name: 'file',
            formData: {},
            header: {
              'Content-Type': 'multipart/form-data', // 对于文件上传，这个通常需要设置
              'Authorization': uni.getStorageSync('token') // 添加你的token头部参数
            },
            success: (res) =>{
              console.log('图片上传',res)
              let obj = JSON.parse(res.data);
              console.log('obj',obj)
              if(obj.code==200){
                // img = obj.fileName
                that.imgArr.push(obj.fileName);
                console.log('imgArr',that.imgArr)
              }
            },
            fail: (error) =>{
              console.log('图片上传失败',error)
              uni.showToast({
                title: '图片上传失败',
                icon: 'none'
              });
            }
          })
        }
      })

    },

    // 选择工序
    updateData() {
      let list = this.workList
      let parmas = {
        storeId: this.storeId,
        tenantId: this.tenantId,
        selectList: list
      }
      uni.navigateTo({
        url: '/subPack/styleManagement/styleManagementSelect/styleManagementSelect?data=' +
            encodeURIComponent(JSON.stringify(parmas)),
        success: res => {},
        fail: () => {},
        complete: () => {}
      });
    },
    removeProcess() {
      console.log('removeProcess')
      let list = []
      this.workList = this.workList.filter((item) => {
        return item.checked == false;
      });
      let cost = 0;
      this.workList.forEach(item=>{
        cost = cost + item.processPrice
      })
      this.listData.forEach(row=>{
        if(row.tableFie=='cost'){
          row.Value = cost
        }
      })
    },
    removeProcessAll() {
      this.workList = [];
      this.listData.forEach(row=>{
        if(row.tableFie=='cost'){
          row.Value = 0
        }
      })
    },
    SwitchClick() {
      this.isActive = !this.isActive;
      console.log('获取值', this.isActive);
    },
    checkIndex(index) {
      console.log(index)
      this.navIndex = index;
    },
    backOnClick() {
      uni.navigateBack({
        delta: 1
      });
      // console.log('点击返回');
    },
	// 获取编号输入框的值
	onInputAccount(index,e) {

		this.listData[index].Value=e.target.value
		// console.log('获取录入值',e.target.value,this.listData);


	},
    updateClick(){
      let img = ''
      if(this.imgArr!=undefined&&this.imgArr.length>0) {
        img = this.imgArr[0]
      }
      let data = {
        id: this.id,
        itemCode: '',
        itemName: '',
        unit: '',
        storeId: this.storeId,
        tenantId: this.tenantId,
        colorids: this.colorIds,
        colorstr: this.colorstr,
        sizeids: this.sizeIds,
        sizestr: this.sizestr,
        cost: 0,
        imgs: img,
        processList: this.workList
      }
      this.listData.forEach(item=>{
        console.log('item',item.Value)
        if(item.tableFie==='itemCode'){
          data.itemCode = item.Value
        }
        if(item.tableFie==='itemName'){
          data.itemName = item.Value
        }
        if(item.tableFie==='unit'){
          data.unit = item.Value
        }
        if(item.tableFie==='cost'){
          data.cost = item.Value
        }
      })
      updateNumberManager(data).then(res=>{
        if(res.code == 200){
          let pages = getCurrentPages();
          let prevPage = pages[pages.length - 2]; //上一个页面
          //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
          prevPage.setData({
            isRefresh: 1
          })
          this.backOnClick()
        }
        // 显示提示信息
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
      }).catch((err) => {
        console.log('新增失败', err);
      });
    },
  }
}
</script>

<style lang="scss">
.contentListItemLeftImgText {
  display: flex;
  width: 30rpx;
  height: 30rpx;

  border-radius: 50%;
  border: 2px solid #999999;
  color: #FFFFFF;
  background-color: #FFFFFF;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.contentListItemLeftImg {
  display: flex;
  width: 30rpx;
  height: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.imagepage {

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

}

.all-check-box {
  width: 10%;
  height: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.workList-buttons_text_1 {
  width: 22.5%;
  height: 100%;


  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #000000;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.workList-buttons_text {
  width: 22.5%;
  height: 100%;


  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #FFFFFF;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;


}

.list_box_out {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;


}

.list-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: row;
  height: 80rpx;
  background: #EEEEEE;
}

.list-box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: row;
  height: 80rpx;
  background: #F9FCFF;
}

.workList-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: row;

  margin-top: 30rpx;


  height: 80rpx;
  background: #0081FF;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
}







.listDataInnerBottomTextRed {

  width: 142rpx;
  height: 60rpx;
  background: #ECF5FD;
  border-radius: 16rpx;

  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #FF4E00;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listDataInnerBottomTextBlack {
  width: 142rpx;
  height: 60rpx;
  background: #ECF5FD;
  border-radius: 16rpx;

  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #0081FF;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

}

.listDataInnerBottom {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  margin-top: 30rpx;
  width: 690rpx;


}







.login {
  margin-top: 20rpx;
  width: 690rpx;
  height: 100rpx;
  border-radius: 30rpx;
  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  margin-bottom: 30rpx;


  background: linear-gradient(90deg, #45A8FF, #0AE1C6);

}




.head-nav {

  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #CCCCCC;
  width: 100%;

}

.head-nav-line {

  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  color: #CCCCCC;
  width: 100%;



}

.head-nav-line1 {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  color: #CCCCCC;
  width: 100%;



}


.white {
  margin-top: 30rpx;
  width: 50rpx;
  height: 4rpx;
  background: red;
  border-radius: 2rpx;
}

.line {
  margin-top: 24rpx;
  width: 80rpx;
  height: 8rpx;
  background: #0081FF;
  border-radius: 2rpx;

  display: flex;
  justify-content: center;
  align-items: center;
}

.activite {
  color: #0081FF;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;




}

.head-nav>view {
  padding-bottom: 10rpx;
}

.ContentScrollX {

  width: 666rpx;
  height: 250rpx;
  white-space: nowrap;
  // background-color: #0081FF;
}


.contentImg {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  position: relative;

  display: inline-block;

  margin-left: 20rpx;
  margin-right: 20rpx;

  width: 190rpx;
  height: 190rpx;
  background: #F5F7F9;
  // background: red;
  border-radius: 20rpx;

  .contentImg2 {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    display: inline-block;




    width: 150rpx;
    height: 150rpx;

    border-radius: 20rpx;

  }

  .contentImgAddBg {
    width: 50rpx;
    height: 50rpx;

    border-radius: 20rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 75rpx;
    left: 75rpx;

    .contentImgAdd {
      width: 40rpx;
      height: 40rpx;



    }
  }

  .contentImgDeleteBg {
    width: 50rpx;
    height: 50rpx;
    background: #FF4E00;
    border-radius: 20rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0rpx;
    right: 0rpx;

    .contentImgDelete {
      width: 30rpx;
      height: 30rpx;



    }


  }
}


.contentImgBg {
  width: 190rpx;
  height: 190rpx;
  background: #000000;
  border-radius: 20rpx;
  position: relative;


}


.contentImgOutInner {
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;

  margin-top: 30rpx;
}

.contentImgOut {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;

  margin-top: 30rpx;

}

.content {
  /* background: #008000; */
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



.SwitchTabOutInnerRight {
  background-color: aqua;
  width: 100%;
  height: 100rpx;
}

.SwitchTabOutInnerLeft {
  background: #0081FF;
  width: 100%;
  height: 100rpx;
}

.SwitchTabOutInnerTopRigthLine {
  width: 50rpx;
  height: 4rpx;
  background: #0081FF;
  border-radius: 2rpx;
}

.SwitchTabOutInnerTopRigthText {
  font-family: HarmonyOS Sans SC;
  font-weight: 600;
  font-size: 28rpx;
  color: #333333;
  line-height: 120rpx;
}

.SwitchTabOutInnerTopRigth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.SwitchTabOutInnerTopLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.SwitchTabOutInnerTop {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.SwitchTabOutInner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 690rpx;
  background: #FFFFFF;
  border-radius: 30rpx;
  margin-top: 30rpx;
}

.SwitchTabOut {

  display: flex;
  justify-content: center;
  align-items: center;

  background: #FFFFFF;
  border-radius: 30rpx;

  margin-top: 30rpx;

}






.contentItemTextRight {
  font-size: 28rpx;
  font-weight: 600;
  color: #666666;
  margin-right: 30rpx;
  width: 200rpx;
  text-align: right;

  word-break: break-all;
  /* break-all(允许在单词内换行。) */
  text-overflow: ellipsis;
  /* 超出部分省略号 */
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/


}

.contentItemTextLeftStart {
  color: red;
}

.contentItemRightContentImg {
  width: 20rpx;
  height: 10rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;

}

.contentItemTextLeft {
  font-size: 28rpx;
  font-weight: 600;
  color: black;
  margin-left: 30rpx;
}

.contentItem2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

  width: 690rpx;
  height: 120rpx;


  /* background-color: aqua; */
}



.contentItemRightContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


.contentItemTextLeftContent {

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.contentItem {

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

  width: 690rpx;
  height: 120rpx;

  border-radius: 30rpx 30rpx 0 0;
  /* background-color: aqua; */

}


.contentItem4 {
  margin-left: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* background-color: bisque; */
}

.labelContent {
  font-size: 20rpx;
  font-weight: 600;
}

.contentItem3 {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  height: 120rpx;

}

.listContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 690rpx;

  background: #FFFFFF;

}

.lineBg {
  width: 100%;
  height: 1rpx;
  background: #F9FCFF;
}


.ContentScroll {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;


  width: 750rpx;

  height: 1100rpx;

  border-radius: 30rpx;
}

.ContentScrollInner {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;


  width: 750rpx;


}
</style>
